<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item>用户余额明细</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <template #header>
                    <div style="display: flex; align-items: center;">
                        <el-input style="width: 260px;" v-model="inputval" placeholder="请输入 UID、手机、昵称、备注" />
                        <div style="padding: 5px;"></div>
						<el-select style="width: 150px;" v-model="page.type" placeholder="请选择类型">
							<el-option label="全部" value="all">全部</el-option>
							<el-option label="余额" value="money">余额</el-option>
							<el-option label="彩金" value="voucher">彩金</el-option>
              <el-option label="积分" value="points">积分</el-option>
						</el-select>
                        <div style="padding: 5px;"></div>
						<el-select style="width: 150px;" v-model="page.action" placeholder="请选择操作">
							<el-option label="全部" value="all">全部</el-option>
							<el-option value="投注">投注</el-option>
							<el-option value="佣金">佣金</el-option>
							<el-option value="充值">充值</el-option>
							<el-option value="取款">取款</el-option>
							<el-option value="后台增加">后台增加</el-option>
							<el-option value="后台减少">后台减少</el-option>
                            <el-option value="充值+后台增加+取款">充值+后台增加+取款</el-option>
						</el-select>
                        <div style="padding: 5px;"></div>
                      <div style="padding: 5px;"></div>

                      <el-date-picker v-model="page.time_date[0]" :default-value="page.time_date[0]" type="datetime" placeholder="开始日期" style="width: 180px;" />
                      <div style="width: 15px"></div>
                      <el-date-picker v-model="page.time_date[1]" :default-value="page.time_date[1]" default-time="12:00:00" type="datetime" placeholder="结束日期" style="width: 180px;" />
                      <div style="padding: 5px;"></div>

                        <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>
                        <div style="padding: 10px;"></div>
                        <!-- <div style="width: 500px; font-weight: 700; font-size: 18px; color: #333333;">
                          <span>总投注金额：￥2000.00</span>
                        </div> -->
                    </div>
                    
                </template>

                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="100" />
                    
                    <el-table-column prop="uid" label="用户UID" />
                    <el-table-column prop="name" label="用户名" />
                    <el-table-column prop="remark" label="用户备注" >
                        <template #default="scope">
                            {{ scope.row.user?.remark }}
                        </template>
                    </el-table-column>
                    <el-table-column label="类型">
                        <template #default="scope">
							<el-tag type="success" v-if="scope.row.type == 'money'">余额</el-tag>
							<el-tag type="danger" v-if="scope.row.type == 'voucher'">彩金</el-tag>
                          <el-tag type="success" v-if="scope.row.type == 'points'">积分</el-tag>
                        </template>
                    </el-table-column>
					
                    <el-table-column label="原始余额">
                        <template #default="scope">
                            <el-tag type="danger">{{ scope.row.money }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="变动金额">
                        <template #default="scope">
                            <!-- <el-tag type="success">{{ scope.row.status }}</el-tag> -->
                            <span v-if="scope.row.status == 1" style="color: red; font-weight: 600;"> -{{ Math.abs(scope.row.amoney) }}</span>
                            <span v-if="scope.row.status == 2" style="color: green; font-weight: 600;"> +{{ scope.row.amoney }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="变动后金额">
                        <template #default="scope">
                            <el-tag type="warning">{{ scope.row.moneys }}</el-tag>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column label="资金备注">
                        <template #default="scope">
                            <el-tag >{{ scope.row.notes }}</el-tag>
                        </template>
                    </el-table-column> -->

                    <el-table-column prop="notes" label="资金备注" >
                      <template #default="scope">
                        <view v-if="scope.row?.order?.game_type=='jianada28' && scope.row.status==1">
                          加拿大28(自开)-投注
                        </view>
                        <view v-else>
                          {{ scope.row.notes }}
                        </view>

                        </template>
                    </el-table-column>

                    <el-table-column prop="create_time" label="订单时间" width="200"/>
                    <el-table-column prop="orderid" label="订单号" width="230"/>
                </el-table>
                <!-- 分页 -->

                <div style="padding: 10px;"></div>
              <el-pagination small background v-model:currentPage="page.pagenum" :page-size="page.pagesize"
                             :page-sizes="[20,50,100,300,500]" :small="small" layout="total, sizes, prev, pager, next, jumper"
                             :total="page.total" @size-change="pageSelect" @current-change="handleCurrentChange" />

            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, UserFilled, Search } from '@element-plus/icons-vue'


const tableData = reactive({ list: [] })

onMounted(() => {
    admin_users_index()
})


// 搜索 
const inputval = ref('')
function inputSearch(){
     if(inputval.value == ''){
		page.uid = ''
     }else{
		page.uid = inputval.value
	 }
     admin_users_index()
}

// 获取用户列表
function admin_users_index() {
    request_post('/admin_users_money_log', page).then((res) => {
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            page.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })

}

var now_date = new Date();
var now_date2 = new Date();

var year = now_date.getFullYear();
var month = now_date.getMonth() + 1; // 月份从0开始，所以要加1
var day = now_date.getDate();
now_date.setHours(23, 59, 59);
now_date2.setHours(0,0,0)

const page = reactive({
    uid:'',
    type:'all',
    action:'all',
    pagenum: 1,
  time_date: [
    now_date2,
    now_date
  ],
    pagesize: 20,
    total: 0
})

function handleSizeChange(val) {
    page.pagenum = val
    admin_users_index()
}
function handleCurrentChange(val) {
    page.pagenum = val
    admin_users_index()
}
function pageSelect(val){
  page.pagenum = 1
  page.pagesize = val

  admin_users_index()
}

</script>

<style></style>
